<template>
    <a-card title  style="margin-bottom:10px;">
        <div style="position: relative;">
            <div @click="returnRoute">
                <icon-arrow-left />
                <b style="margin-left:5px; font-size:20px;" v-text="'故障工单'"></b>
            </div>
            <a-button @click="returnRoute" style="position: absolute;right: 6%;top: 0px;">取消</a-button>
            <a-button type="primary" @click="finish" style="position: absolute;right: 0;top: 0px;">完成</a-button>
        </div>
    </a-card>
        
    <a-card :title="'基本信息'" style="margin-bottom:10px;" >
      
         <a-descriptions :data="datalist"  :column="2" />
    </a-card>
    <a-card :title="'工单流程'"  style="margin-bottom:10px;">
    <div style="width: 800px;margin: 30px 0 30px 0;">
      <a-steps 

      :current="dataForm.state+2" label-placement="vertical" status="wait">
      <a-step >工单提交</a-step>
      <a-step>报障中
      </a-step>
      <a-step>完成</a-step>
    </a-steps>
    </div>
    </a-card>
    
     <a-card :title="'工单日志'" style="margin-bottom:10px;" >
    <a-timeline >
    <a-timeline-item v-for="item of journal"

    >
    <div style="display: inline;">{{item.label}}</div>
   <div style=" display: inline; margin-left: 100px;">
         <a-avatar :size="30">Design</a-avatar>
          <span style="margin-left: 10px;">{{item.username}}</span>
      </div>
      <div style="font-size: x-small;color:rgb(192,192,192)">{{item.time}}</div>
    </a-timeline-item>
   
  </a-timeline>
       
    </a-card>
    <a-card :title="'工单评论'">
       <a-textarea placeholder="可输入文字，图片" allow-clear/>
    </a-card>
</template>
<script lang="ts">
import { useRouter, useRoute } from "vue-router";
import { defineComponent, reactive, watch, onMounted } from 'vue'
export default defineComponent({
    name: 'viewDetail',
    setup() {
        const router = useRouter();
        const route = useRoute();
        let dataForm = reactive({//更新完的数据
            state: 0,
            aDevice: '',
            zDevice: '',
            aPort: '',
            zPort: '',
            faultDescUrl: '',
            lineName: '',
            creator: '',
            creatTime: '',
            faultReason: '',
            responser: '',
            endTime: '',
            respTime: '',
            faultLevel: null,
        });
        let journal=reactive([//数据是加载此页面去后端搞来的哈
            {
             label:'工单已提交',
             time:'2002-06-28',
             username:'',
            
            },
             {
             label:'工单已提交',
             time:'2002-06-28',
           
            },
           
        ]

        )
        const datalist = reactive([{
            label: '工单状态',
            value: dataForm.state
        }, {
            label: '故障等级',
            value: dataForm.faultLevel
        }, {
            label: 'A端设备',
            value: dataForm.aDevice
        }, {
            label: 'A端端口',
            value:  dataForm.aPort
        }, {
            label: 'Z端设备',
            value:  dataForm.zDevice
        },{
            label: 'Z端端口',
            value: dataForm.zPort
        },
        {
            label: '故障现象',
            value: dataForm.faultDescUrl
        },
        {
            label: '商务线路名称',
            value: dataForm.lineName
        },
        {
            label: '提单人',
            value: dataForm.creator
        },
        {
            label: '故障原因',
            value: dataForm.faultReason
        },
        {
            label: '创建时间',
            value: dataForm.creatTime
        },
        {
            label: '负责人',
            value: dataForm.responser
        },
          {
            label: '定位完成时间',
            value: dataForm.endTime
        },
        {
            label: '厂商响应时间',
            value: dataForm.respTime
        }
        ]);
        function returnRoute() {
            router.go(-1)
        }
        function finish() {
            //dataForm提交上去
        }
        return {
            dataForm,
            returnRoute,
            finish,
            datalist,
            journal
        }
    },
})
</script>
